<template>
    <div class="muzikland">   
        <div class="subnav"><!--红色条条-->
            <span class="jf-sanjiao"></span><!--小三角-->
        </div>
        <div class="jf-big">
            <div class="jf-cer">
				<div class="jf-sd3"><!--右半部分-->
					<div class="jf-sd3">
						<div class="jf-minelst"><!--创建的歌单外层div-->
							<h2 class="jf-ff1">
								<a href="script:void(0)">
									<i>新建</i>
								</a>
								<span class="jf-rtitle">
									<i class="jf-tri1"></i>创建的歌单
									<span class="jf-flag">(2)</span>
								</span>
							</h2>
                            <ul class="j-flag">
                                <li class="j-iflag">
                                	<div class="item">
                                		<div class="left">
                                			<a href=""><img src="http://p1.music.126.net/EWC8bPR8WW9KvhaftdmsXQ==/3397490930543093.jpg?param=40y40" alt="" /></a>
                                			<span class="name">我喜欢的音乐</span>
                                			<span class="s-fc4">0首</span>
                                		</div>
                                	</div>
                                </li>
                                <li class="j-iflag">
                                	<div class="item">
                                		<div class="left">
                                			<a href=""><img src="http://p1.music.126.net/EWC8bPR8WW9KvhaftdmsXQ==/3397490930543093.jpg?param=40y40" alt="" /></a>
                                			<span class="name">我喜欢</span>
                                			<span class="s-fc4">0首</span>
                                			<div class="shou">
                                				<span class="u-icn u-icn-10"></span>
                                				<span class="u-icn u-icn-11"></span>
                                			</div>
                                		</div>
                                	</div>
                                </li>
                            </ul>
						</div>
						<div class="jf-hide">
						
						
						</div>
					</div>
				</div>
				<div class="jf-mn3"><!--左半部分-->
					<div class="jf-left"><!--左半部分-->
                        <div class="jf-lycifo">
                          <div class="jf-cvrwrap"><!--专辑图-->
                            <div class="jf-cover">
                                <img class="jf-img" src="http://p1.music.126.net/EWC8bPR8WW9KvhaftdmsXQ==/3397490930543093.jpg?param=200y200" alt="">
                                <div class="jf-msk"></div>
                            </div>
                          </div>  
                          <div class="jf-cnt"><!--歌词部分-->
                            <div class="jf-hd">
                                <i class="jf-lab"></i>
                                <div class="jf-tit">
                                    <em class="jf-ff2">{{songdata.name}}</em>
                                </div>
                            </div>
                            <div class="jf-dess">
                            	<a href="script:void(0)" class="face">
                            		<img src="http://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg?param=200y200"/>
                            	</a>
                            	<span class="name"><a href="script:void(0)">{{songdata.name}}</a></span>
                                
                            	<span class="time">2017-03-31&nbsp;创建</span>
                            </div>
                             <div>
                            	<p>个人简介：{{songdata.introduce}}</p>
                            	<!--<span class="time">2017-03-31&nbsp;创建</span>-->
                            </div>
                             <div class="s-dess">
                                 <p>所在地区：{{songdata.area}}</p>
                            	
                            	<!--<span class="time">2017-03-31&nbsp;创建</span>-->
                            </div>
                             <div>
                                 <p>社交网络：<a :href="songdata.social">微博</a></p>
                            	
                            	<!--<span class="time">2017-03-31&nbsp;创建</span>-->
                            </div>
                            
                            <div class="jf-info">
                            	<div class="jf-btn2">
	                            	<a href="script:void(0)" class="u-btn1 "><i>
                                    <em class="ply"></em>播放</i><a class="u-btni" href="script:void(0)"></a></a>
	                            	<a href="script:void(0)" class="u-btn2 jf-btn"><i>收藏</i></a>
	                            	<a href="script:void(0)" class="u-btn3 jf-btn"><i>分享</i></a>
	                            	<a href="script:void(0)" class="u-btn4 jf-btn"><i>下载</i></a>
	                            	<a href="script:void(0)" class="u-btn5 jf-btn"><i><span class="cnt_comment_count">142790</span></i></a>
                            	</div>
                            </div>
                       
                          </div> 
                        </div>
                    </div>
					<div class="u-title">
						<h3><span class="f-ff2">歌曲列表</span></h3>	
						<span class="sub"><span class="flag_trackCount">0</span>首歌</span>
					</div>
					<div class="j-flag">
						<div class="n-nmusic">
							<span class="f-ff2">
								<span class="u-icnss"></span>
								暂无音乐
							</span>
							<p class="txt">点击
								<i class="u-icn"></i>
								即可将你喜欢的音乐收藏到“我的音乐”&nbsp;&nbsp;&nbsp;&nbsp;马上去
								<a href="" class="s-fc7">发现音乐</a>
							</p>
						</div>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>
<script>

    export default{
        name:"muzikland",
        data(){
            return{
               msg:"歌单"
            }
        },
        created:function(){

        },
        components:{

        },
        methods:{
        
 
        },
         computed: {
            songdata () {
                return this.$store.state.songdata
            },  
         }      
    }
</script>
<style scoped>
.j-flag{
	
}
.n-nmusic{
	    padding: 105px 0 105px 0;
    text-align: center;
}
.f-ff2{
	    padding-bottom: 38px;
    font-size: 18px;
}
.u-icnss{
	margin-right: 17px;
	width: 64px;
    height: 50px;
    background: url("../../../static/img/download8.png") 0 -347px;
    display: inline-block;
}
.txt{
	color: #999;
}
.u-icn{
	margin: 0 9px 0 7px;
	width: 16px;
    height: 14px;
    background: url("../../../static/img/download8.png")0 -400px;
}
.s-fc7{
    margin-left: 5px;
    color: #0c73c2;
}
.u-title{
	margin-top: 10px;
	padding: 0 10px 0 32px;
	height: 33px;
	border-bottom: 2px solid #c20c0c;
	float: left;
	width: 100%;
}
.u-title h3{
    float: left;
    margin-top: 0px;
   
}
.f-ff2{
	 font-size: 20px;
}
.sub{
	margin: 9px 0 0 20px;
	float: left;
}
.name{
	max-width: 210px;
}
.name a{
	    color: #0c73c2;
}
.face{
	    margin-right: 10px;
	    float: left;
    width: 35px;
    height: 35px;
}
.face img{
	float: left;
    width: 35px;
    height: 35px;
}
.jf-dess{
	margin: 0 0 20px;
    line-height: 35px;
}

.j-iflag:hover>.item>.left>.shou{
	display: block;
}
.u-icn-11{
	background: url("../../../static/img/download8.png") 0 -284px;
}
.u-icn-11:hover{
	background: url("../../../static/img/download8.png") -20px -284px;
}
.u-icn-10{
	background: url("../../../static/img/download8.png") 0 -270px;
}
.u-icn-10:hover{
	background: url("../../../static/img/download8.png") -20px -270px;
}
.u-icn{    
	display: inline-block;
	width: 13px;
    height: 13px;
}
.shou{
	display: none;
	float: right;
	margin-right: 20px;
}
.s-fc4{
	float: left;
	height: 20px;
}
.name{
	float: left;
	/*height: 20px;*/
	width: 145px;
	}
	.left span{
		margin-left: 20px;
	}
.left a{
	float: left;
	width: 40px;
	height: 42px;
}
.left{
margin: 5px 0 0 20px;
}
.j-iflag{
	width:232px;
	cursor: pointer;
	height: 50px;
	background: #e6e6e6;
	margin-left: 5px;
}
.jf-tri1{
    border-color: #ccc transparent transparent;
    border-style: solid dashed dashed;
    border-width: 8px 7px 0;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px 0 5px;
    cursor: pointer;
    font-size: 0;
    height: 0;
    line-height: 0;
}
.jf-rtitle{
        cursor: pointer;
}
.jf-ff1 a i{
    display: inline-block;
    line-height: 22px;
    overflow: hidden;
    padding-left: 20px;
    color: #515151;
    font-size: 12px;
}
.jf-ff1 a{
	float: right;
	width: 52px;
    height: 22px;
    display: inline-block;
    background: url("../../../static/image/button.png") 0 -96px;
}
.jf-ff1{
	padding: 0 10px 12px 15px;
    font-size: 14px;
    color: #000;
}
.jf-minelst{
	margin-top: 5px;
}
.jf-sd3{/*中间右半部分*/
	float: left;
   	z-index: 99;
    position: fixed;
    height: 318px;
     width: 240px;
    padding-bottom: 50px;
    padding-top: 40px;
}
.jf-mn3{/*中间左半部分*/
	height: 100%;
    float: right;
    width: 740px;
    padding-bottom: 50px;
    /*background-color: aquamarine*/
}
.subnav{/*红色条条*/
    height: 5px;
    background:url("../../../static/img/topbar.png") 0 -230px repeat-x;
}
.jf-sanjiao{/*小三角 */
    display: block;
    position: absolute;
    left: 33%;
    top: 63px;
    width: 14px;
    height: 9px;
    margin-left: -7px;
    overflow: hidden;
     background:url("../../../static/img/topbar.png") -226px 0;
}
.jf-big{/*最外城div*/
    width:100%;
    height:800px;
    background-color:rgb(245,245,245);
}
.jf-cer{/*居中用*/
	width: 982px;
	height: 800px;
	background-color: white;
	margin: 0 auto;
}

.jf-left{/*左部分的 */
    float: left;
    width:100%;  
    border-right:2px solid rgb(245,245,245);
}
.jf-right{
    float: right;
   padding: 20px 40px 40px 30px;
 
}
.jf-wrap7{
    margin: 20px 0;
    padding-bottom: 20px;
      width:200px;
}
.jf-hd3{
position: relative;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 140%;
}
.jf-fl{
float: left;
font-size: 100%;
}
.jf-cb{
height: 65px;
    margin-bottom: 10px;
     background:url("../../../static/image/download1.png") 0 -392px;
}
.jf-cd li{
    float: left;
}
.jf-fc4{
        color: #999;
}

.jf-lycifo{
    padding: 47px 30px 40px 39px;
}
.jf-cvrwrap{
    float: left;
    width: 206px;
    margin-right: -226px;
    position: relative;
}
.jf-cover{
    width: 198px;
    height: 198px;
    position: relative;
    display: block;
    float: left;
}
.jf-img{
    width: 200px;
    height: 199px;
    
    display: block;
}
.jf-msk{
    display:block;
    position: absolute;
    width: 206px;
    height: 205px;
    top: -4px;
    left: -4px;
    background:url("../../../static/image/coverall.png") 0 -1285px;
}
.jf-cnt{
    float: right;
    width: 414px;
}
.jf-lab{
    float: left;
    width: 54px;
    height: 24px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    background:url("../../../static/img/download8.png") 0 -243px;
}
.jf-tit{
    margin-left: 64px;
    position: relative;
    top: -6px;
    font-size: 24px;
}
.jf-ff2{
margin-right: 7px;
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.jf-des{
margin: 10px 0;
color: #999;
}
.jf-des span{
color: #333;
} 
.jf-fc7{
    color: #0c73c2;
}
.jf-btn2{
    margin-bottom: 25px;
    margin-right: -10px;
}
.u-btni-addply{
    float: left;
}
.u-btn1{
    float: left;
    color: #fff;
    padding: 0 5px 0 0;
    display: inline-block;
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -428px;    
}
.u-btn1 i{
      float: left;
    padding: 0 7px 0 8px;
    color: #fff;
    display: inline-block;
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -387px;    
}
.ply{
    float: left;
    width: 20px;
    height: 18px;
    margin: 6px 2px 2px 0;
    overflow: hidden;
    background:url("../../../static/image/button2.png")  0 -1622px;

}
.u-btni{
    margin-right: -4px;
    width: 31px;
    margin-left: -3px;
    padding-right: 0;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png")   0 -1588px;

}
.u-btn2{
    margin-right: 6px;
    padding: 0 5px 0 5px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn2 i{
    padding-right: 2px;
    padding-left: 28px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -977px;
}
.u-btn3{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn3 i{
    padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -1225px;
}
.u-btn4{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn4 i{
    padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") 0 -2761px;
}
.u-btn5{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn5 i{
        padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -1465px;
}
.cnt_comment_count{
cursor: pointer;
}
.lyric-content{
    width:414px;
    height: 200px;
    margin-top: 13px;
    line-height: 23px;
    display: inline-block;

}











</style>